<!--
 * @description: 卷帘
 * @Author: FengKongLi
 * @Date: 2022-09-13 14:53:40
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-09-23 09:06:33
-->
<template>
  <div>
    <secen-view @already="init3D" id="view3D">
      <div ref="slider" class="slider"></div>
    </secen-view>
  </div>
</template>

<script>
let view3D = null;
let earthAtNight = null;
export default {
  name: "LayerSwipe",
  data() {
    return {
      slider: "",
      moveActive: false,
    };
  },

  methods: {
    init3D(viewer) {
      view3D = viewer;
      earthAtNight = view3D.imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3812 })
      );

      // 加载OSM在线地图（黑色风格）
      // const layerLeft = this.view3D.imageryLayers.addImageryProvider(
      //   new Cesium.UrlTemplateImageryProvider({
      //     url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
      //     subdomains: ["a", "b", "c", "d"],
      //   })
      // );
      this.handleSwipe();
    },

    handleSwipe() {
      //   通过分屏线与屏幕左侧偏移量和其父div宽度的比值作为图层左右分屏的比值，即左侧地图显示占全图的比例。
      // 设置分屏显示 SplitDirection 拆分方向 在左侧显示添加的图层
      earthAtNight.splitDirection = Cesium.SplitDirection.LEFT;

      // 设置分屏位置 splitPosition 拆分的位置
      this.slider = this.$refs.slider;
      const parentElement = this.slider.parentElement;
      view3D.scene.splitPosition =
        this.slider.offsetLeft / parentElement.offsetWidth;

      const handler = new Cesium.ScreenSpaceEventHandler(this.slider);

      let that = this;
      handler.setInputAction(function () {
        that.moveActive = true;
        // LEFT_DOWN表示鼠标左键按下事件。
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      handler.setInputAction(function () {
        that.moveActive = true;
        // 表示触摸表面上的两指事件的开始。
      }, Cesium.ScreenSpaceEventType.PINCH_START);

      // handler.setInputAction(function (movement) {
      //   that.move(movement);
      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       handler.setInputAction(
        that.move
      , Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       handler.setInputAction(
        that.move
      , Cesium.ScreenSpaceEventType.PINCH_MOVE);
      // handler.setInputAction(function (movement) {
      //   that.move(movement);
      // }, Cesium.ScreenSpaceEventType.PINCH_MOVE);

      handler.setInputAction(function () {
        that.moveActive = false;
        // 表示鼠标左键向上事件。
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      handler.setInputAction(function () {
        that.moveActive = false;
      }, Cesium.ScreenSpaceEventType.PINCH_END);
    },
    move(movement) {
      if (!this.moveActive) {
        return;
      }
      const relativeOffset = movement.endPosition.x;
      const splitPosition =
        (this.slider.offsetLeft + relativeOffset) /
        this.slider.parentElement.offsetWidth;
      this.slider.style.left = `${100.0 * splitPosition}%`;
      view3D.scene.splitPosition = splitPosition;
    },
  },
};
</script>
<style lang="scss" scoped>
#view3D {
  position: relative;
}
.slider {
  position: absolute;
  left: 50%;
  top: 0;
  background-color: red;
  width: 3px;
  height: 100%;
  z-index: 99;
}
.slider:hover {
  cursor: ew-resize;
}
</style>
